<script setup lang="ts">
import type { UserProfile } from '#/api/user/sysuser/profile';

import { computed } from 'vue';

import { usePreferences } from '@vben/preferences';

import {
  ElAvatar,
  ElCard,
  ElDescriptions,
  ElDescriptionsItem,
  ElTag,
  ElTooltip,
} from 'element-plus';

const props = defineProps<{ profile?: UserProfile }>();

defineEmits<{
  // 头像上传完毕
  uploadFinish: [];
}>();

const avatar = computed(
  () =>
    props.profile?.user.avatar ??
    'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
);

const { isDark } = usePreferences();
const poetrySrc = computed(() => {
  const color = isDark.value ? 'white' : 'gray';
  return `https://v2.jinrishici.com/one.svg?font-size=12&color=${color}`;
});
</script>

<template>
  <ElCard :loading="!profile" class="h-full lg:w-1/3">
    <div v-if="profile" class="flex flex-col items-center gap-[24px]">
      <div class="flex flex-col items-center gap-[20px]">
        <ElTooltip content="点击上传头像" placement="top">
          <ElAvatar fit="cover" :src="avatar" :size="150" />
        </ElTooltip>
        <div class="flex flex-col items-center gap-[8px]">
          <span class="text-foreground text-xl font-bold">
            {{ profile.user.username }}
          </span>
          <!-- https://www.jinrishici.com/doc/#image -->
          <img :src="poetrySrc" />
        </div>
      </div>
      <ElDescriptions :column="2" border>
        <ElDescriptionsItem label="昵称">
          {{ profile.user.nickname ?? $t('common.unset') }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="手机号">
          {{ profile.user.phoneNumber || '未绑定手机号' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="邮箱">
          {{ profile.user.email || '未绑定邮箱' }}
        </ElDescriptionsItem>
        <ElDescriptionsItem label="部门">
          <ElTag type="primary">
            {{ profile?.deptName ?? '未分配部门' }}
          </ElTag>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="岗位">
          <ElTag v-if="profile.postGroup" type="primary">
            {{ profile.postGroup }}
          </ElTag>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="角色">
          <ElTag v-if="profile.roleGroup" type="primary">
            {{ profile.roleGroup }}
          </ElTag>
        </ElDescriptionsItem>
        <ElDescriptionsItem label="上次登录">
          {{ profile.user.loginDate }}
        </ElDescriptionsItem>
      </ElDescriptions>
    </div>
  </ElCard>
</template>
